<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: green;
			}
			.b2{
				/*width: 200px;*/
				height: 200px;
				background-color: pink;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//获取btn01
				var btn01 = document.getElementById("btn01");
				//获取box
				var box = document.getElementById("box");
				//为btn01绑定单击事件
				btn01.onclick = function(){
					//改变box的样式
					//box.className += " b2";
					//addClass(box , "b2");
					//removeClass(box , "b2");
					toggleClass(box ,"b2");
				};
				
				//定义一个函数，用来向一个元素添加指定的class属性值
				/*
				 * 有两个参数obj代表要添加的class属性的元素
				 * cn代表要添加的class值
				 */
				function addClass(obj , cn){
					if(!hasClass(obj , cn)){
						obj.className += " " + cn;
					}
					
				}
				
				//判断一个元素中是否有指定的class属性值
				//如果有，返回true，没有返回flase
				function hasClass(obj , cn){
					var reg = new RegExp("\\b" + cn + "\\b");
					return reg.test(obj.className);
				}
				
				function removeClass(obj , cn){
					var reg = new RegExp("\\b" + cn + "\\b");
					obj.className = obj.className.replace(reg , "");
				}
				
				function toggleClass(obj , cn){
					if(hasClass(obj , cn)){
						removeClass(obj , cn);
					}else{
						addClass(obj , cn);
					}
				}
			};
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮修改box的样式</button>
		<br /><br />
		<div id="box" class="b1 b2"></div>
	</body>
</html>
